<template>
    <div>
        <header-footer :commonData="{$parent:$parent}">
            <div class="online_apply" v-cloak>
                <div class="crumb">
                    <ul>
                        <li class="color666 f_left">当前位置：</li>
                        <li>
                            <router-link class="color666 f_left" to="/home">首页></router-link>
                        </li>
                        <li class="color666 f_left">特种作业持证人员补考报名</li>
                    </ul>
                </div>
                <div class="border_content text_center special_apply_box">
                    <img src="/static/img/tzgtitle1.png" class="contTitleImg">
                    <h3 class="apply_title">特种作业人员补考报名 </h3>
                    <h4 class="apply_title_explain">请填写您的报名信息</h4>
                    <!-- <p class="red" style="margin-bottom: 1.25rem;">注：本次报名只收取培训费，考务费为线下收取（60元/人）,如若有变动以窗口收费为准。</p> -->
                    <el-form class="special_apply_form specialConfirm" label-width="100px" style="width: 500px;">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{webUser.realName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{webUser.identityCode}}</p>
                        </el-form-item>
                        <el-form-item label="选择专业：" class="choose_project resitSelect">
                            <el-select v-model="form.majorName" placeholder="选择专业" disabled>
                                <el-option v-for="item in chooseTypes" :key="item.typeCode" :label="item.majorName"
                                    :value="parseInt(item.typeCode)">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="text_left choose_project resitSelect" label="选择学历：">
                            <el-select v-model="form.educationBackground" placeholder="请选择" disabled>
                                <el-option v-for="item in educations" :key="item.value" :label="item.label" :value="parseInt(item.value)">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="text_left" label="理论：">
                            <p v-if="form.theoryProductId>0">参加</p>
                            <p v-else>不参加</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="实操：">
                            <p v-if="form.practicalProductId>0">参加</p>
                            <p v-else>不参加</p>
                        </el-form-item>
                        <el-form-item style="margin-left: -140px;" class="checkAgree">
                            <el-checkbox v-model="checkAgree">已阅读并同意遵守<span @click="changeAgree" class="applyxieyi">《考试报名信息协议》</span></el-checkbox>
                        </el-form-item>
                        <el-form-item class="apply_btns" v-if="!String.isEmptyOrNUll(form.id)" style="margin: 49px 0 50px 0!important;">
                            <a class="apply_return" @click="prev">返回</a>
                            <a @click="comfirmOrder">确认提交</a>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </header-footer>
        <!-- 协议弹框 -->
        <el-dialog title="考试报名协议信息" class="userXuXieDialog" center :visible.sync="checkAgreeDialog">
            <div style="white-space: pre-wrap;" class="agreeCheckDialog">
                <userXieyi></userXieyi>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" class="xieyiBtn" @click="checkAgreeDialog = false">我已阅读并同意</el-button>
            </span>
        </el-dialog>
        <!-- 用户须知 -->
        <el-dialog title="特种作业人员个人考试报名须知" class="userXuXieDialog" center :visible.sync="userXuDialog">
            <div style="white-space: pre-wrap;" class="agreeCheckDialog">
                <tzgPerson></tzgPerson>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" class="xieyiBtn" @click="userXuDialog = false">我知道了</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    var _this;
    import headerFooter from '@/components/cont_education/header_and_footer.vue'
    import userXieyi from '@/components/userExamXuZhi/user_xieyi.vue'
    import tzgPerson from '@/components/userExamXuZhi/tzg_person.vue'
    export default {
        name: "tzg_apply",
        data: function() {
            return {
                chooseTypes: [{
                        "majorName": "建筑电工",
                        "typeCode": "jzdg"
                    },
                    {
                        "majorName": "建筑焊工",
                        "typeCode": "jzhg"
                    },
                    {
                        "majorName": "建筑起重信号司索工",
                        "typeCode": "qzssg"
                    },
                    {
                        "majorName": "建筑普通脚手架架子工",
                        "typeCode": "jsjjzg"
                    },
                    {
                        "majorName": "建筑施工升降机安装拆卸工",
                        "typeCode": "sjjcxg"
                    },
                    {
                        "majorName": "建筑物料提升机安装拆卸工",
                        "typeCode": "tsjcxg"
                    },
                    {
                        "majorName": "高处作业吊篮安装拆卸工",
                        "typeCode": "dlcxg"
                    },
                    {
                        "majorName": "建筑塔式起重机安装拆卸工",
                        "typeCode": "qzjcxg"
                    },
                    {
                        "majorName": "建筑物料提升机司机",
                        "typeCode": "tsjsj"
                    },
                    {
                        "majorName": "建筑施工升降机司机",
                        "typeCode": "sjjsj"
                    },
                    {
                        "majorName": "建筑塔式起重机司机",
                        "typeCode": "qzjsj"
                    },
                    {
                        "typeName": "建筑附着升降脚手架架子工",
                        "typeCode": "jzsjjzg"
                    }
                ],
                userXuDialog: true, //用户须知
                checkAgreeDialog: false, //用户协议弹框
                checkAgree: false,
                educations: [{
                        value: '0',
                        label: '初中'
                    },
                    {
                        value: '1',
                        label: '职高'
                    },
                    {
                        value: '2',
                        label: '高中'
                    },
                    {
                        value: '3',
                        label: '高技'
                    },
                    {
                        value: '4',
                        label: '中专'
                    },
                    {
                        value: '5',
                        label: '专科'
                    },
                    {
                        value: '6',
                        label: '本科'
                    },
                    {
                        value: '7',
                        label: '硕士'
                    },
                    {
                        value: '8',
                        label: '博士'
                    },
                    {
                        value: '9',
                        label: '其他'
                    }
                ],
                projectCode: this.$route.params.type,
                dialogVisible: false, //选择专业弹框
                specialSureApplyInfo: false,
                currentApply: undefined,
                webUser: {
                    realName: "",
                    identityCode: ""
                },
                praTheArrs: [],
                form: {
                    majorName: "",
                    educationBackground: '', //学历
                    threoryProductCode: "", //理论
                    practicalProductCode: "", //实操
                    productCode: ""
                },
                noApplyRadio: false, //禁止选择
                arr: ["建筑普通脚手架架子工", "建筑塔式起重机司机", "建筑施工升降机司机", "建筑物料提升机司机", "建筑电工", "建筑焊工"],
            }
        },
        beforeCreate: function() {
            _this = this;
        },
        mounted: function() {
            this.common.post(this.api.getCombApply, {}, function(res) {
                _this.webUser = res.resultMap;
            });
            this.common.post(this.api.getResitList, {}, function(res) {
                if (!String.isEmptyOrNUll(res.resultMap)) {
                    _this.form = res.resultMap;
                } else {
                    _this.$message({
                        message: '当前暂无补考报名信息',
                        duration: 0,
                        showClose: true,
                        type: 'error'
                    })
                    // _this.$message.error("当前暂无补考报名信息");
                }
            });
        },
        methods: {
            changeAgree: function() {
                this.checkAgreeDialog = true;
            },
            comfirmOrder: function() {
                if (!this.checkAgree) {
                    this.$message.error("请阅读并勾选报名协议！");
                    return;
                }
                this.common.post(this.api.tzgResitApply, {id:this.form.id}, function(res) {
                    localStorage.setItem("checkDate", JSON.stringify(res.ext));
                    localStorage.setItem("tzgResit", 1);
                    _this.common.toPage("/home/apply/offline_check/" + res.resultMap);
                });
            },
            prev: function() {
                this.common.toPage("/study/apply/exam_apply");
            }

        },
        components: {
            headerFooter,
            userXieyi,
            tzgPerson
        }
    }
</script>

<style>
    .el-checkbox {
        margin-right: 0;
    }

    .special_webucation_table td .el-checkbox__label {
        display: none;
    }

    .special_apply_box .el-tag {
        margin: 0 6px;
    }

    .faceEducation .el-form-item__label {
        width: 164px !important;
    }

    .resitSelect input.el-input__inner {
        color: #666666 !important;
    }
</style>
